<template>
  <div class="timeout-cell" :class="[
    {'is-show': show}
    ]" v-observe-visibility="{
  callback: visibilityChanged,
}">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "timeout-cell",

  props: {
    time: {
      type: Number,
      default: 0
    },
    iteration: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      show: false,
      timer: null
    };
  },

  methods: {
    visibilityChanged(isVisible, entry) {
      if (isVisible) {
        this.timer = setTimeout(() => {
          this.show = true;
        }, this.time);
      } else if (this.iteration) {
        clearTimeout(this.timer);
        this.show = false;
      }
    }
  },

  mounted() {
     
  },

  destroyed() {
    clearTimeout(this.timer);
  }
};
</script>

<style lang="scss" scoped>
@include b(timeout-cell) {
  visibility: hidden;

  @include when(show) {
    visibility: initial;
  }
}

@include b(slideInUp) {

  -webkit-transform: translate3d(0, 30%, 0);
  transform: translate3d(0, 30%, 0);
  opacity: 0;
  @include utils-transition-normal(all 0.8s ease-in-out);
  @include when(show) {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@include b(slideInLeft) {
  opacity: 0;
  -webkit-transform: translate3d(-30%, 0, 0);
  transform: translate3d(-30%, 0, 0);
  @include utils-transition-normal(all 0.8s ease-in-out);
  @include when(show) {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@include b(slideInRight) {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  visibility: visible;
  @include utils-transition-normal(all 0.8s ease-in-out);
  @include when(show) {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@include b(slideInDown) {
  opacity: 0;
  transform: translate3d(0, -30%, 0);
  @include utils-transition-normal(all 0.8s ease-in-out);
  @include when(show) {
    opacity: 1;
    transform: translate3d(0, 0, 0);

  }
}

@include b(fadeIn) {
  opacity: 0;
  @include utils-transition-normal();
  @include when(show) {
    opacity: 1;
  }
}
</style>

